<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .display{
            /* 跟幽灵一样消失，一点痕迹都不留下 */
            display: none;
        }
        .content{
            /* 虽然消失了，但还是会占据空间 */
            visibility: hidden;
        }
        .rgba{
            /* rgba最后一个参数设置为0，直接隐身，还是会占据空间 */
            color: rgba(255, 0, 0, 0);
            /* 直接使用下面color这种写法，也可以隐身，最后两位补上0就可以了，但是有些浏览器不一定支持 */
            /* color: #ff000000; */

            /* 切记不要设置background-color为隐藏，不然真就只隐藏背景 */
        }

        .opacity{
            /* 上面说了不能直接通过设置背景透明让内容一起透明
            那么我们可以使用opacity，携带自己和所有的子元素一起设置透明度 */
            opacity: 0;
        }
    </style>
</head>
<body>
    <div class="display">我是display</div>
    <div class="content">我是content</div>
    <div class="rgba">我是rgba</div>

    <div class="opacity">我是opacity</div>
</body>
</html>